﻿<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="PhotoGroup1.aspx.cs" Inherits="OnlineOrderSystem.PhotoGroup1" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery lightBox plugin</title>
	<link rel="stylesheet" type="text/css" href="./Styles/style-projects-jquery.css" />       
    <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    <script type="text/javascript" src="./Scripts/jquery.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="./Styles/jquery.lightbox-0.5.css" media="screen" />
    <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
    
    <!-- Ativando o jQuery lightBox plugin -->
    <script type="text/javascript">
        $(function () {
            $('#gallery a').lightBox();
        });
    </script>
   	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	#gallery {
	    clear: both;
	    width: 960px;
	    padding: 50px 0px;
	    background: url(images/templatemo_content_top.jpg) top no-repeat;
    }

    #gallery h1 {
	    color: #1b2308;
	    font-size: 24px;
	    margin: 0 20px 15px 20px;
	    padding: 0 0 15px 0;
	    border-bottom: 1px dotted #1b2308;
    }

    #gallery h2 {
	    font-size: 14px;
	    color: #1f1f1f;
	    margin: 0;
	    padding: 0 0 5px 0;
    }

    #gallery p {
	    margin: 0px;
	    padding: 0px;
    }

    #gallery .top_dishes_box {
	    float: left;
	    width: 215px;
	    margin-left: 20px;
    }

    #gallery .top_dishes_box img {
	    margin-bottom: 15px;
	    border: 5px solid #e1e0e0;
	    width: 205px;
	    height: 150px;
    }
	</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="templatemo_menu">
        <ul>
          <li><a href="Default.aspx"><b>Home</b></a></li>
            <li><a href="Location.aspx" ><b>Location</b></a></li>
            <li><a href="Menu.aspx" ><b>Menu</b></a></li>
            <li><a href="Coupon.aspx"><b>Coupon</b></a></li>
            <li  class="current"><a href="Gallery.aspx"><b>Gallery</b></a></li>
            <li><a href="ContactUs.aspx"><b>Contact Us</b></a></li>
        </ul>
    </div> <!-- end of menu -->
    
    <div id="gallery">

      <h1>Photo Gallery</h1>
        <div class="top_dishes_box">
          <a href="images/image1.jpg"><img src="images/image1.jpg" alt="image"/></a>
          <h2>1</h2>
      </div>
        <div class="top_dishes_box">
          <a href="images/image2.jpg"><img src="images/image2.jpg" alt="image"/></a>
            <h2>2</h2>  
        </div>
        
        <div class="top_dishes_box">
          <a href="images/image3.jpg"><img src="images/image3.jpg" alt="image" /></a>
            <h2>3</h2>
      </div>

        <div class="top_dishes_box">
          <a href="images/image4.jpg"><img src="images/image4.jpg" alt="image" /></a>
            <h2>4</h2>
        </div>   

        <div class="top_dishes_box">
          <a href="images/image5.jpg"><img src="images/image5.jpg" alt="image" /></a>
            <h2>5</h2>
        </div>

        <div class="cleaner">&nbsp;</div>
    </div> <!-- end of top dishes -->

    <script type="text/javascript">var vglnk = { api_url: '//api.viglink.com/api', key: '0dff9ade2d1125af6c910069b6d6e155' };</script><script type="text/javascript" async="" src="./Scripts/vglnk.js"></script>
</asp:Content>